<template>
  <view>

    <!-- 用 v-show 控制显示内容 -->
    <view v-show="selectedIndex === 0">
      <text>Tab 1 内容</text>
    </view>
    <view v-show="selectedIndex === 1">
      <text>Tab 2 内容</text>
    </view>
    <!-- 自定义底部tabBar -->
    <view class="custom-tab-bar">
      <view
          class="tab-bar-item"
          :class="{'selected': selectedIndex === 0}"
          @click="selectTab(0)"
      >
        <view class="icon" :style="{ backgroundImage: selectedIndex === 0 ? 'url(./static/tab1_selected.png)' : 'url(./static/tab1.png)' }"></view>
        <view class="text">Tab 1</view>
      </view>
      <view
          class="tab-bar-item"
          :class="{'selected': selectedIndex === 1}"
          @click="selectTab(1)"
      >
        <view class="icon" :style="{ backgroundImage: selectedIndex === 1 ? 'url(./static/tab2_selected.png)' : 'url(./static/tab2.png)' }"></view>
        <view class="text">Tab 2</view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue';

// 当前选中的 tab
const selectedIndex = ref(0);

// 选择 tab 的函数
function selectTab(index) {
  selectedIndex.value = index;
}
</script>

<style scoped>
/* 自定义tabBar样式 */
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}

/* 每个tab item样式 */
.tab-bar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%; /* 使tabBaritem宽度平分 */
  height: 100%;
  color: #7A7E83; /* 默认未选中时的颜色 */
}

.tab-bar-item.selected {
  color: #ff0000; /* 选中时的颜色 */
}

/* 图标部分 */
.icon {
  width: 24px;
  height: 24px;
  background-size: cover;
  background-position: center;
  margin-bottom: 5px;
}

/* 文字部分 */
.text {
  font-size: 12px;
}
</style>
